popupMenu: Restyle the slider to use a color for the 'active' area

In the mockups the slider does not have an uniform color but uses
one color (shade of blue) to indicate the current value and one
to indicate "the rest" (shade of grey).

So adjust the slider to look like that to be closer to the look
in the mockups and thus to the design.

https://bugzilla.gnome.org/show_bug.cgi?id=644600

diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index 4fd303a95cee05fce9e998a1e0b939b3d0133245..289b59cbdcbd04f076572ef41cc0c1bdb8842d4c 100644 (file)
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -150,6 +150,8 @@ StTooltip StLabel {
     -slider-height: 0.3em;
     -slider-background-color: #333333;
     -slider-border-color: #5f5f5f;
+    -slider-active-background-color: #76b0ec;
+    -slider-active-border-color: #1f6dbc;
     -slider-border-width: 1px;
     -slider-handle-radius: 0.5em;
 }

diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index e16220c891e1ae803d5bfe57af1bae9f7e496298..d6eaf8e935883ba04d0e2725c11f4e6626b2d9da 100644 (file)
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -485,12 +485,30 @@ PopupSliderMenuItem.prototype = {
         let sliderBorderColor = themeNode.get_color('-slider-border-color');
         let sliderColor = themeNode.get_color('-slider-background-color');
 
+        let sliderActiveBorderColor = themeNode.get_color('-slider-active-border-color');
+        let sliderActiveColor = themeNode.get_color('-slider-active-background-color');
+
+        cr.setSourceRGBA (
+            sliderActiveColor.red / 255,
+            sliderActiveColor.green / 255,
+            sliderActiveColor.blue / 255,
+            sliderActiveColor.alpha / 255);
+        cr.rectangle(handleRadius, (height - sliderHeight) / 2, sliderWidth * this._value, sliderHeight);
+        cr.fillPreserve();
+        cr.setSourceRGBA (
+            sliderActiveBorderColor.red / 255,
+            sliderActiveBorderColor.green / 255,
+            sliderActiveBorderColor.blue / 255,
+            sliderActiveBorderColor.alpha / 255);
+        cr.setLineWidth(sliderBorderWidth);
+        cr.stroke();
+
         cr.setSourceRGBA (
             sliderColor.red / 255,
             sliderColor.green / 255,
             sliderColor.blue / 255,
             sliderColor.alpha / 255);
-        cr.rectangle(handleRadius, (height - sliderHeight) / 2, sliderWidth, sliderHeight);
+        cr.rectangle(handleRadius + sliderWidth * this._value, (height - sliderHeight) / 2, sliderWidth * (1 - this._value), sliderHeight);
         cr.fillPreserve();
         cr.setSourceRGBA (
             sliderBorderColor.red / 255,